<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane name="one">
        <span slot="label">
          <el-badge :value="unRead" class="un-read">未读消息</el-badge>
        </span>
        <div class="msg-con" v-loading="loading">
          <empty v-if="unReadList.length == 0 && !loading" txt="暂无未读消息"></empty>
          <div v-else class="list-box">
            <div class="list">
              <p v-for="(item,index) in unReadList" :key="index" @click="clickRead(item.id)"><span>[{{item.subject}}] {{item.content}}</span><span>{{item.sendDate}}</span></p>
            </div>
            <div class="more">
              <span class="show-more" v-if="unReadCurrent * 4 < unRead" @click="unreadMore">点击加载更多</span>
              <span class="no-more" v-else>~没有更多了~</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史消息" name="two">
        <div class="msg-con" v-loading="loading">
          <empty v-if="readList.length == 0 && !loading" txt="暂无历史消息"></empty>
          <div v-else class="list-box">
            <div class="list">
              <p v-for="(item,index) in readList" :key="index"><span>[{{item.subject}}] {{item.content}}</span><span>{{item.sendDate}}</span></p>
            </div>
            <div class="more">
              <span v-if="readCurrent * 4 < read" class="show-more" @click="readMore">点击加载更多</span>
              <span class="no-more" v-else>~没有更多了~</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import {getMessageList,readOne} from "@/http/common"
export default {
  data(){
    return {
      unRead:0,
      read:0,
      loading:false,
      activeName:'one',
      unReadList:[],
      readList:[],
      readCurrent:1,
      unReadCurrent:1,
      // 定时器
      timer: null
    }
  },
  created(){
    this.queryInfo()
    this.setTime()
  },
  methods:{
    //一分钟 轮询 消息接口
  setTime(){
      if (this.timer) {
      clearInterval(this.timer)
      } else {
      this.timer = setInterval(() => {
          setTimeout(this.queryInfo(), 0)
      }, 60000)
		}
  },

  queryInfo(){
    this.getUnReadList()
    this.getHistoryList()
  },
    //未读消息列表
    getUnReadList(){
      this.loading = true
    //   getMessageList({status: 'UNREAD',size:4,current: this.unReadCurrent}).then(res => {
    //     this.unRead = res.data.total
    //     if(this.unReadCurrent == 1) this.unReadList = []
    //     this.unReadList = this.unReadList.concat(res.data.records)
    //     this.loading = false
    //   })
    },
    //历史消息列表
    getHistoryList(){
      this.loading = true
    //   getMessageList({status: 'READ',size:4,current: this.readCurrent}).then(res => {
    //     this.read = res.data.total
    //     this.readList = this.readList.concat(res.data.records)
    //     this.loading = false
    //   })
    },
    unreadMore(){
      this.unReadCurrent++
      this.getUnReadList()
    },
    readMore(){
      this.readCurrent++
      this.getHistoryList()
    },
    clickRead(id){
    //   readOne({id:id}).then(res => {
    //     this.unReadCurrent = 1
    //     this.getUnReadList()
    //   })
    }
  },
  beforeDestroy(){
   clearInterval(this.timer);        
   this.timer = null;
  }
}
</script>

<style lang="scss" scoped>
.un-read{
  ::v-deep .el-badge__content.is-fixed{
    top: 8px !important;
    right: 4px !important;
  }
}
</style>
